/*
 * 访客统计列表
 * @Author: zfx
 * @Date: 2018-07-16 11:00:08
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

</style>
<template>
	<div class="v-home-customer-visit-statistic">

		<Table
			:columns="columns"
			:loading="loading"
			:data="visitStatistics"
			border
			height="350" />

	</div>
</template>

<script>

export default {
	name: 'VisitStatistic',

	props: {
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
		visitStatistics: {
			type: Array,
			default() {
				return [];
			},
		},
		dataType: {
			type: String,
			default() {
				return 'month';
			},
		},
	},
	data() {
		return {
			columns: [], // 表格数据
			columnsData: ['year', 'month', 'count', 'start_at', 'end_at'],
		};
	},
	watch: {
		dataType() {
			switch (this.dataType) {
			case 'year':
				this.columnsData = ['year', 'count', 'start_at', 'end_at'];
				break;

			case 'month':
				this.columnsData = ['year', 'month', 'count', 'start_at', 'end_at'];
				break;

			case 'week':
				this.columnsData = ['year', 'week', 'count', 'start_at', 'end_at'];
				break;

			case 'day':
				this.columnsData = ['year', 'month', 'day', 'count', 'start_at', 'end_at'];
				break;

			default:
				this.columnsData = ['year', 'month', 'count', 'start_at', 'end_at'];
			}
		},
		visitStatistics() {
			this.columns = this.getTableColumns();
		},
	},
	methods: {
		getTableColumns() {
			const tableColumnList = {
				year: {
					title: this.$t('home.year'),
					key: 'year',
					align: 'center',
					render: (h, { row }) => <div> { row.year || '-' } </div>,
				},
				month: {
					title: this.$t('home.month'),
					key: 'month',
					align: 'center',
					render: (h, { row }) => <div> { row.month || '-' } </div>,
				},
				week: {
					title: this.$t('home.weeks'),
					key: 'week',
					align: 'center',
					render: (h, { row }) => <div> { row.week || '-' } </div>,
				},
				day: {
					title: this.$t('home.day'),
					key: 'day',
					align: 'center',
					render: (h, { row }) => <div> { row.day || '-' } </div>,
				},
				count: {
					title: this.$t('home.access_number'),
					key: 'count',
					align: 'center',
					render: (h, { row }) => <div> { row.count || '-' } </div>,
				},
				start_at: {
					title: this.$t('home.start_access_time'),
					key: 'start_at',
					align: 'center',
					render: (h, { row }) => <div> { row.start_at || '-' } </div>,
				},
				end_at: {
					title: this.$t('home.end_access_time'),
					key: 'end_at',
					align: 'center',
					render: (h, { row }) => <div> { row.end_at || '-' } </div>,
				},
			};

			const data = [];

			this.columnsData.forEach(col => data.push(tableColumnList[col]));

			return data;
		},
	},
};
</script>
